<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm :init-query="initQuery" v-model:value="queryForm" @submit="queryReloadTable">
        <template #more="{ queryForm }">
          <n-form-item label="关联权限对象名称">
            <n-input clearable v-model:value="queryForm['fkSecurityObjId']"
                     placeholder="输入关联权限对象名称"/>
          </n-form-item>
          <n-form-item label="权限字段名称">
            <n-input clearable v-model:value="queryForm['fieldName']" placeholder="输入权限字段名称"/>
          </n-form-item>
          <n-form-item label="权限对象表名称">
            <n-input clearable v-model:value="queryForm['fieldChinese']" placeholder="输入权限对象表名称"/>
          </n-form-item>
          <n-form-item label="字段配置">
            <n-input clearable v-model:value="queryForm['fieldConfig']" placeholder="输入字段配置"/>
          </n-form-item>
        </template>
        <template #default="{ queryForm }">
          <n-form-item label="关联权限对象名称">
            <n-input clearable v-model:value="queryForm['fkSecurityObjId']"
                     placeholder="输入关联权限对象名称"/>
          </n-form-item>
          <n-form-item label="权限字段名称">
            <n-input clearable v-model:value="queryForm['fieldName']" placeholder="输入权限字段名称"/>
          </n-form-item>
          <n-form-item label="权限对象表名称">
            <n-input clearable v-model:value="queryForm['fieldChinese']" placeholder="输入权限对象表名称"/>
          </n-form-item>
          <n-form-item label="字段配置">
            <n-input clearable v-model:value="queryForm['fieldConfig']" placeholder="输入字段配置"/>
          </n-form-item>
          <n-form-item label="创建时间">
            <n-date-picker clearable value-format="yyyy-MM-dd HH:mm:ss"
                           v-model:formatted-value="queryForm['createTime-gte']" type="datetime"
                           placeholder="开始时间"/>
            <span class="ml-3 mr-3">-</span>
            <n-date-picker clearable alue-format="yyyy-MM-dd HH:mm:ss"
                           v-model:formatted-value="queryForm['createTime-lte']" type="datetime"
                           placeholder="结束时间"/>
          </n-form-item>
          <n-form-item label="关键字">
            <n-input clearable v-model:value="queryForm['searchKey']" placeholder="请输入查询关键字"/>
          </n-form-item>
        </template>

      </QueryForm>
    </div>
    <div>
      <n-space>
        <n-button type="primary" :disabled="!vCtl.addBtn" @click="doSaveModal()">
          新建
        </n-button>
        <n-button type="warning" :disabled="!vCtl.updateBtn" @click="doUpdateModal()">
          编辑
        </n-button>
        <n-button type="error" :disabled="!vCtl.delBtn" @click="doDeleteModal()">
          删除
        </n-button>
      </n-space>
    </div>
    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      @update:checked-row-keys="onCheckedRowEvent"
      :scroll-x="1090"
    >
      <template #tableTitle>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>

  </n-card>
</template>

<script lang="ts">
import {defineComponent, ref, watch} from "vue";
import {BasicTable} from "@/components/Table";
import {QueryForm} from "@/components/QueryForm";
import httpApi, {selectPageList} from "./httpApi";
import {
  checkedRows,
  doDeleteModal,
  doSaveModal,
  doUpdateModal,
  enabledOptions,
  initQuery,
  onCheckedRowEvent,
  queryForm,
  reloadTable,
  vCtl,
  tableColumns,
  tableRef
} from "./Service";

export default defineComponent(
  {
    components: {BasicTable, QueryForm},
    props: {
      queryFormValue: {
        type: [Object],
        default: () => {
          return {};
        }
      }
    },
    setup(props, ctx) {
      queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
      const loadDataTable = async (res) => {
        console.log("更新", checkedRows.value);
        return await httpApi.selectPageList({
          searchKey: null,
          ...res,
          ...queryForm.value
        });
      };
      const queryReloadTable = async () => {
        tableRef.value.resetPageReload();
      }
      watch(props.queryFormValue, () => {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        console.log("更新完成")
      });
      return {
        queryReloadTable,
        loadDataTable,
        reloadTable,
        tableColumns,
        vCtl,
        onCheckedRowEvent,
        enabledOptions,
        queryForm,
        tableRef,
        initQuery,
        doSaveModal,
        doUpdateModal,
        doDeleteModal
      };
    }
  }
);


</script>

<style lang="less" scoped></style>
